<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <meta content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-apap-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <!--<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">-->
    <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
    <title>一起来做抗霾英雄！</title>
    <link rel="stylesheet" type="text/css" href="<%=path %>/mayday/css/reset.css">
    <link rel="stylesheet" type="text/css" href="<%=path %>/mayday/css/clear.css">
</head>
<body>
    <span id="musicControl">
        <a id="mc_play" class="onx">
            <audio id="musicfx" loop="loop" autoplay="true" src="<%=path %>/mayday/audio/m2.mp3"></audio>
        </a>
    </span>
    <div class="text">
        <img class="text1" src="<%=path %>/mayday/img/text1.png" alt="">
        <img class="text2" src="<%=path %>/mayday/img/text2.png" alt="">
        <img class="text3" src="<%=path %>/mayday/img/text3.png" alt="">
        <img class="text4" src="<%=path %>/mayday/img/text4.png" alt="">
        <img class="text5" src="<%=path %>/mayday/img/text5.png" alt="">
        <img class="text6" src="<%=path %>/mayday/img/text6.png" alt="">
        <p class="text7">感谢有你</p>
    </div>
    <div class="clear">
        <div class="mask">
            <img src="<%=path %>/mayday/img/clear-alert.png" class="clear-alert" alt="">
            <img src="<%=path %>/mayday/img/hand.png" class="hand" alt="">
        </div>
        <div class="title">
            <img src="<%=path %>/mayday/img/work.png" class="work" alt="">
            <img class="star" src="<%=path %>/mayday/img/star.png" alt="">
            <img class="star" src="<%=path %>/mayday/img/star.png" alt="">
            <img class="star" src="<%=path %>/mayday/img/star.png" alt="">
            <img class="star" src="<%=path %>/mayday/img/star.png" alt="">
            <img class="star" src="<%=path %>/mayday/img/star.png" alt="">
            <img class="star" src="<%=path %>/mayday/img/star.png" alt="">
        </div>
        <canvas class="canvas"></canvas>
    </div>
    <script type="text/javascript" src="<%=path %>/mayday/js/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="<%=path %>/mayday/js/main.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
    <script type="text/javascript">
        //微信jssdk config
        wx.config({
            debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId : '${signObj.appid}', // 必填，公众号的唯一标识
            timestamp : '${signObj.timestamp}', // 必填，生成签名的时间戳
            nonceStr : '${signObj.noncestr}', // 必填，生成签名的随机串
            signature : '${signObj.signature}',// 必填，签名，见附录1
            jsApiList : [ 'checkJsApi', //判断当前客户端版本是否支持指定JS接口
            'onMenuShareTimeline', //分享给好友
            'onMenuShareAppMessage', //分享到朋友圈
            'onMenuShareQZone', //分享到Q空间
            'onMenuShareWeibo',//分享到微博
            'onMenuShareQQ'//分享到qq
            ]
        // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        var title="这个五一，一起做抗霾英雄！";
        var description="再不行动，听说我们的下一代就要这样生活";
        var imgUrl="${basePath}/<%=path %>/mayday/img/share.jpg";
        var shareBaseUrl='${baseUrl}';
        wx.ready(function() { //ready函数用于调用API，如果你的网页在加载后就需要自定义分享和回调功能，需要在此调用分享函数。//如果是微信游戏结束后，需要点击按钮触发得到分值后分享，这里就不需要调用API了，可以在按钮上绑定事件直接调用。因此，微信游戏由于大多需要用户先触发获取分值，此处请不要填写如下所示的分享API
            wx.onMenuShareTimeline({ //分享到朋友圈的API  
                        title : title, // 分享标题
                        link : shareBaseUrl+'/auth2.html', // 分享链接
                        imgUrl : imgUrl, // 分享图标
                        success : function() {
                            // 用户确认分享后执行的回调函数
                        },
                        cancel : function() {
                            // 用户取消分享后执行的回调函数
                        }
                    });
            wx.onMenuShareAppMessage({//分享到朋友 
                        title : title, // 分享标题
                        desc : description, // 分享描述
                        link : shareBaseUrl+'/auth2.html', // 分享链接
                        imgUrl : imgUrl, // 分享图标
                        type : 'link', // 分享类型,music、video或link，不填默认为link
                        dataUrl : '', // 如果type是music或video，则要提供数据链接，默认为空
                        success : function() {
                            // 用户确认分享后执行的回调函数
                        },
                        cancel : function() {
                            // 用户取消分享后执行的回调函数
                        }
                    });
            wx.onMenuShareQZone({//分享到qq空间
                title: title, // 分享标题
                desc: description, // 分享描述
                link: shareBaseUrl+'//auth2.html', // 分享链接
                imgUrl: imgUrl, // 分享图标
                success: function () { 
                   // 用户确认分享后执行的回调函数
                    
                },
                cancel: function () { 
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.onMenuShareWeibo({
                title: title, // 分享标题
                desc: description, // 分享描述
                link: shareBaseUrl+'/auth2.html', // 分享链接
                imgUrl: imgUrl, // 分享图标
                success: function () { 
                   // 用户确认分享后执行的回调函数
                    
                },
                cancel: function () { 
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.onMenuShareQQ({//分享到qq
                title: title, // 分享标题
                desc: description, // 分享描述
                link: shareBaseUrl+'/auth2.html', // 分享链接
                imgUrl: imgUrl, // 分享图标
                success: function () { 
                   // 用户确认分享后执行的回调函数
                    
                },
                cancel: function () { 
                   // 用户取消分享后执行的回调函数
                }
            });
        });
    </script>
    <script>
        $(function (){
        	   $('#mc_play').click(function () {
                   if ($('#mc_play').hasClass('onx')){
                       $('#mc_play audio').get(0).pause();
                       $('#mc_play').attr('class','stop');
                   }else{
                       $('#mc_play audio').get(0).play();
                       $('#mc_play').attr('class','onx');
                   }
                   $('#music_play_filter').hide();
                   event.stopPropagation(); //阻止冒泡 
               })
               function audioAutoPlay(id){
                   var audio = document.getElementById(id);
                   audio.play();
                   document.addEventListener("WeixinJSBridgeReady", function () {
                       audio.play();
                   }, false);
               }
               function just_play(id){
                   $('#mc_play audio').get(0).play();
                   $('#mc_play').attr('class','onx');
                   if (typeof(id)!='undefined'){
                       $('#music_play_filter').hide();
                   }
                   event.stopPropagation(); //阻止冒泡 
               }
               function is_weixn(){
                   return false;
                   var ua = navigator.userAgent.toLowerCase();
                   if(ua.match(/MicroMessenger/i)=="micromessenger") {
                       return true;
                   } else {
                       return false;
                   }
               }
               window.onload=function(){
                   if (!is_weixn()){
                       just_play();                    
                   }
               }
               audioAutoPlay('musicfx');
            document.querySelector('body').addEventListener('touchstart', function (ev) {
                $('.mask').css('display', 'none');
            });
            var canvas = document.querySelector('.canvas');
            canvas.width = window.screen.width;
            canvas.height = window.screen.height;
            ctx = canvas.getContext('2d'),
            w = canvas.width;
            h = canvas.height;
            area = w * h;
            l = canvas.offsetLeft;
            t = canvas.offsetTop,
            img = new Image();
 
            var randomImg = function(){
                var random = Math.random();
                if(random < 0.4){
                    img.src = '<%=path %>/mayday/img/clear/${areaId}.jpg';
                }else if(random > 0.6){
                    img.src = '<%=path %>/mayday/img/clear/${areaId}.jpg';
                }else{
                    img.src = '<%=path %>/mayday/img/clear/${areaId}.jpg';
                }
            };
            var bindEvent = function(){
                canvas.addEventListener('touchstart', startFunc, false);
                canvas.addEventListener('touchmove', moveFunc, false);
                canvas.addEventListener('touchend', endFunc, false);
            };

            var startFunc = function(e){
                e.preventDefault();
                var touch = e.touches[0],
                    posX = touch.clientX - l,
                    posY = touch.clientY - t;
                ctx.beginPath();
                ctx.moveTo(posX, posY);
            };

            var moveFunc = function(e){
                e.preventDefault();
                var touch = e.touches[0],
                    posX = touch.clientX - l,
                    posY = touch.clientY - t;
                ctx.lineTo(posX, posY);
                ctx.stroke();
            };
            var endFunc = function(e){
                e.preventDefault();
                var touch = e.touches[0] || e.changedTouches[0],
                    posX = touch.clientX - l,
                    posY = touch.clientY - t;
                ctx.lineTo(posX, posY);
                ctx.stroke();
                ctx.closePath();
                var data = ctx.getImageData(0, 0, w, h).data;
                var scrapeNum = 0;
                for(var i = 3, len = data.length; i < len; i += 4){
                    if(data[i] === 0){
                        scrapeNum++;
                    }
                }
                if(scrapeNum > area * 0.1){
                    ctx.clearRect(0, 0, w, h);
                    canvas.removeEventListener('touchmove', moveFunc, false);
                    canvas.removeEventListener('touchend', endFunc, false);
                    var divH = $('.title').height();
                    $('.clear .title .work').fadeIn();
                    for (var i = 0; i < $('.star').length; i++) {
                        $('.star').eq(i).css({'top': Math.random() * divH * 0.5 + divH * 0.2, 'left': Math.random() * w * 0.9})
                        $('.star').eq(i).delay(200 * i).fadeIn(600).fadeOut(600);
                    }
                    var starFlash = setInterval(function() {
                        for (var i = 0; i < $('.star').length; i++) {
                            $('.star').eq(i).css({'top': Math.random() * divH * 0.5 + divH * 0.2, 'left': Math.random() * w * 0.9})
                            $('.star').eq(i).delay(300 * i).fadeIn().fadeOut();
                        }
                    }, $('.star').length * 300 + 300);
                    setTimeout(function (){
                        $('.clear').fadeOut(600, function(){
                            clearInterval(starFlash);
                            $("#musicfx").attr("src","<%=path %>/mayday/audio/m3.mp3");
                            $('.text').fadeIn(function (){
                                $('.text1').fadeIn(800, function (){
                                    $('.text2').fadeIn(800, function (){
                                         $('.text3').fadeIn(800, function (){
                                            $('.text4').fadeIn(800, function (){
                                                 $('.text5').fadeIn(800, function (){
                                                    $('.text6').fadeIn(800, function (){
                                                        $('.text7').fadeIn();
                                                        setTimeout(function (){
                                                            window.location.href='<%=path %>/mayday/end.html?teamId=${teamId}';
                                                        }, 2000);
                                                    })
                                                });
                                            })
                                        });
                                    })
                                });
                            });
                            
                        });
                    }, 2000);
                }
            }
            var init = (function(){
                ctx.fillStyle = "rgba(104,101,113, .7)";
                ctx.fillRect(0, 0, w, h);
                ctx.lineWidth = 50; // 设置画笔线宽
                ctx.lineCap = 'round'; // 一条线两端点平滑
                ctx.lineJoin = 'round'; // 两条线接头平滑
                randomImg();            
                img.addEventListener('load', function(){
                    canvas.style.backgroundImage = 'url(' + img.src +')';
                    ctx.globalCompositeOperation = 'destination-out';
                    bindEvent();
                });
            })();
        })
    </script>
</body>
</html>

